import { Form, Input, Button, Checkbox, message } from 'antd'
import './login.scss'
import { UserOutlined, LockOutlined } from "@ant-design/icons";
import { useDispatch } from 'react-redux';
import { login } from '../../store/actions'
import { useHistory, useLocation } from 'react-router-dom/cjs/react-router-dom.min';
import React, { useState } from 'react';
function Login() {
    const location = useLocation()
    // 使用react hooks声明变量
    const history = useHistory()
    // 路由导航组件
    const dispatch = useDispatch()
    // 登录按钮状态
    const [useDisabled, setDisabled] = useState(false)
    // 表单验证
    const handlesubmit = async (values) => {
        // 从表单中解构出验证码和手机号码
        setDisabled(true)
        try {
            const { mobile, code } = values
            // 调用登录操作，并传入手机号和验证码
            await dispatch(login(mobile, code))
            history.replace(location?.state?.returnUrl || '/home');
        } catch (e) {
            message.error(e.response?.data?.message || '登录失败')
        }
        finally {
            setTimeout(() => {
                setDisabled(false)
            }, 3000)
        }
    }
    return (
        <Form size='large' validateTrigger={['onChange', 'onBlur']} onFinish={handlesubmit} autoconplate='off' initialValues={{ mobile: '13911111111', code: '246810', isAgree: true }} >
            <div className='login'>
                <img src="https://img2.baidu.com/it/u=682071393,2663300758&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500" alt="" />
                <div className="logins">
                    <div>
                        <h2>极客园</h2>
                    </div>
                    <Form.Item style={{ textAlign: 'center' }} name='mobile' rules={[
                        { required: true, message: '请输入手机号' },
                        {
                            pattern: /^1[3-9]\d{9}$/,
                            message: '手机格式不正确'
                        }
                    ]}>
                        <Input prefix={<UserOutlined />} placeholder="请输入手机号" style={{ width: '300px' }} />
                    </Form.Item>
                    <Form.Item style={{ textAlign: 'center' }} name='code' rules={[
                        { required: false, message: '请输入验证码' },
                        {
                            len: 6,
                            message: '验证码6个字符串'
                        }
                    ]}>
                        <Input prefix={<LockOutlined />} placeholder="请输入验证码" style={{ width: '300px' }} />
                    </Form.Item>
                    <Form.Item style={{ textAlign: 'center' }} name="isAgree" valuePropName='checked' rules={[
                        {
                            validator: (_, value) => {
                                if (value === true) return Promise.resolve();
                                else return Promise.reject(new Error('请勾选我已阅读并同意'))
                            }
                        }
                    ]}>
                        <Checkbox>我已阅读并同意「用户协议」和「隐私条款」</Checkbox>
                    </Form.Item>
                    <Form.Item style={{ textAlign: 'center' }}>
                        <Button className='btns' type="primary" disabled={useDisabled} style={{ textAlign: 'center', width: '300px' }} htmlType='submit' block >
                            登录
                        </Button>
                    </Form.Item>
                </div>
            </div>
        </Form>
    );
}

export default Login;